<template>
    <div class="home">
        <my-head title="电影" :back="false"  ></my-head>
        <div class="banner">
            <div class="city" v-if="city" @click="gotoWhere({name:'city',query:city})">
                <span>{{city.name}} <van-icon name="arrow-down" class="iconone" /></span>
            </div>
            <van-swipe  class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(l,i) in banners" :key='i'>
                    <van-image :src="l.imgUrl" class="himg"></van-image>
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="home-box">
            <van-tabs v-model="type" animated color="#ff5f16" title-active-color="#ff5f16" sticky swipeable line-height="1" line-width="100px">
                <van-tab title="正在热映" name="1">
                    <hlist :films="films" :type="type"></hlist>
                </van-tab>
                <van-tab title="即将上映" name="2">
                    <hlist :films="films" :type="type"></hlist>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>


<script>
export default {
    data(){
        return {
            banners:[],
            films:[],
            type:1,
            pageSize:10,
            pageNum:1
        }
    },
    watch:{
        type(v){
            this.getFilms(v);
        }
    },
    methods:{
        async getFilms(type){
            let res = await this.$ajax.getMZdata({
                cityId: this.city.cityId,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                type: type,
            },{
                'X-Host': 'mall.film-ticket.film.list'
            })
            this.films = res.data.films;
        },
        async getBanners(){
            let res = await this.$ajax.getMZdata(
            {
                cityId: this.city.cityId,
                type: 2
            },
            {
                'X-Host': 'mall.cfg.common-banner',
                'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.0","e":"164016685720306605375489","bc":"340800"}'
            })
            this.banners = res.data 
        }
    },
    mounted(){
        // 已经选择城市
        // 没有选择就需要 去选择城市
        if(this.city){
            this.getBanners()
            this.getFilms(this.type)
        }else{
            // 弹框提示去选择 
            this.$dialog.alert({
                title: '选择城市',
                message: '请选去选择你当前所在的城市',
            }).then(() => {
            // on close
                this.$router.push({
                    name:'city'
                })
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.home{
    width:100%;
    .banner{
        position: relative;
        .himg{
            width:100%;
            height:210px;
        }
        .city{
            position: absolute;
            top:60px;
            left:15px;
            height:24px;
            padding:0 8px;
            line-height: 24px;
            background: rgba(0,0,0,0.4);
            border-radius: 20px;
            z-index:1000;
            color:#fff;
        }
    }
   
}
</style>